<template>
	<!--添加保养计划-->
	<el-dialog :visible.sync="isShow" @close="close" width="70%" class="upKeepDialog" :show-close='false' :closeOnClickModal='false'
	 append-to-body>
		<span slot="title" class="dialog-title">
		  	保养计划
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="120px" :inline="false" class="demo-form-inline form" :model="form" :rules="rules" ref="upKeepAddForm">


			<el-form-item label="名称:" prop="name">

				<el-input size="mini" v-model="form.name" placeholder="请输入计划名称"></el-input>
			</el-form-item>
			<el-form-item label="负责人:" prop="leader">
				<el-select filterable v-model="form.leader" placeholder="请选择" multiple size='mini' style="display: block;">
					<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">

					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始日期:" prop="startDate">
				<el-date-picker v-model="form.startDate" type="date" size="mini" style="width:100%;" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
				>
				</el-date-picker>
			</el-form-item>
			<!--<el-form-item label="下次执行日期:" prop="nextDate" v-if="flag=='edit'">
				<el-date-picker v-model="form.nextDate" type="date" size="mini" disabled style="width:100%;" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>-->
			<el-form-item label="循环间隔:" prop="times">
				<el-input  size="mini" v-model="form.times" :min="1" style="display: inline-block;width: 80px;" @blur="decNumber(form.times)" oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>
				<el-select v-model="form.spaceTime" placeholder="请选择" size="mini" style="display: inline-block;width: calc(100% - 85px);">
					<el-option label="周" value="周"></el-option>
					<el-option label="月" value="月"></el-option>
					<el-option label="年" value="年"></el-option>
				</el-select>
			</el-form-item>
			
		</el-form>
		<div class="elTab">
			<el-tabs style="width: 100%;">
				<el-tab-pane label="保养项">
					<el-button type="primary" size="mini" @click="addbyx" style="float:right;margin-bottom:10px;">添加</el-button>
					<el-table :data="tableData" class="tableCon" size='mini' style="width: 100%; height:calc(100% - 40px)">
						<el-table-column type="index" label="序号" width="50">
						</el-table-column>
						<el-table-column prop="itemContent" min-width="100" label="保养项">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.itemContent"></el-input>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="mini" @click="deletebyx(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button class="penalButton" type="primary" size="mini" @click="submit(0)" :disabled="!isRepeat">确定</el-button>
			<el-button class="penalButton" size="mini" @click="close">取消</el-button>
	  </span>

	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	import selectItem from './selectItem.vue'

	export default {
		
		props: {
			flag: String,
			equipmentId: String,//仪器id
			upKeepEditData: Object
		},
		components: {
			selectItem
		},
		data() {
			return {
				isShow: true,
				selectItemData: [],
				keeper: [],
				tableData: [],
				form: {
					equipment: '',
					maintainType: "MA01",
					name: '',
					startDate: '',
					nextDate: '',
					cycle: '',
					spaceTime: '周',
					times: '',
					leader: [],
					equipmaintplanItemBeanList: [],
					quartzBean: {
						type: "2",
						jobGroup: "equipment",
						status: "1"
					}
				},
				// 实施日期的限制条件
				// pickerOptions: {
				// 	disabledDate(time) {
				// 		return time.getTime() < Date.now();
				// 	},
				// },
				rules: {
					name: [{ required: true, type: 'string', message: '请填写名称', trigger: 'blur' },],
					startDate: [{ required: true, type: 'string', message: '请选择日期', trigger: 'change' },],
					times:[{ required: true,  message: '请填写', trigger: 'blur' },],
					leader:[{required: true,message: '请选择负责人', trigger: 'change' },],
				},
				isRepeat:true,
			}
		},
		created() {

		},
		mounted() {
			this.form.equipment = this.equipmentId
			console.log(this.upKeepEditData)
			if (Object.keys(this.upKeepEditData).length !== 0) {
				this.form.name = this.upKeepEditData.name
				this.form.startDate = this.upKeepEditData.startDate
				this.form.nextDate = this.upKeepEditData.nextDate
				this.form.cycle = this.upKeepEditData.cycle
				this.form.spaceTime = this.upKeepEditData.spaceTime
				this.form.times = this.upKeepEditData.times
				// this.form.leader = this.upKeepEditData.leader
				// this.keeper = this.upKeepEditData.leader.split(',')
				this.form.leader = this.upKeepEditData.leader.split(',')
				this.tableData = JSON.parse(JSON.stringify(this.upKeepEditData.equipmaintplanItemBeanList))
			} else {

				this.defaultItem()
			}
		},
		computed: {
			...mapState(['EmployeeByLabs'])
		},
		methods: {
			close() {
				this.$refs.upKeepAddForm.resetFields();
				this.$parent.upKeepEditData = {}
				this.$parent.upKeepShow = false;
				this.isRepeat = true;
			},
			// 验证保留位数只能为整数
			decNumber(val) {
				var reg = /^[1-9]\d*$/;
				var isInt = reg.test(Number(val));
				if (!isInt) {
					this.form.times = "";
				}
			},
			readEquipPlanItemList() {
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: 'resource/readEquipPlanItemList.htm',
						method: 'post',
						params: { equipment: this.equipmentId },
						isJson: false
					}).then(res => {
						if (res.code == 0) {
							console.log(res)
							resolve(res)
						} else {
							reject('error')
						}
					})
				})

			},
			defaultItem() {
				this.readEquipPlanItemList().then(res => {
					var addData = res.data;
					addData.forEach(item => {
						item.itemContent = item.content
					})
					this.tableData = addData;
				})
			},
			addbyx() {
				this.tableData.push({ itemContent: '' })
			},
			deletebyx(index) {
				this.tableData.splice(index, 1)
			},
			submit(submitType) {
				
				this.$refs.upKeepAddForm.validate((valid) => {
					if (valid) {
						var data = JSON.parse(JSON.stringify(this.form));
						let cycleObj = { '周': 'weekCycle', '月': 'monthCycle', '年': 'yearCycle' };
						let cycle = cycleObj[this.form.spaceTime];
						// this.form[cycle] = this.form.times
						data[cycle] = data.times;
						let url
						if (Object.keys(this.upKeepEditData).length !== 0) {
							url = 'resource/updateEquipPlan.htm'
							// this.form.id = this.upKeepEditData.id
							data.id = this.upKeepEditData.id
						} else {
							url = 'resource/addEquipPlan.htm'
						}

						// this.form.submitType = submitType;
						data.submitType = submitType
						// this.form.leader = this.keeper.join(',');
						// this.form.leader = this.form.leader.join(',');
						data.leader = this.form.leader.join(',');
						// this.form.equipmaintplanItemBeanList = this.tableData;
						data.equipmaintplanItemBeanList = this.tableData;
						if(data.equipmaintplanItemBeanList.length == 0){
							this.$notify({
								title:"警告",
								type:"warning",
								message:"请添加保养项"
							})
							return;
						}
						this.isRepeat = false;
						this.$http({
							apiUrl: url,
							method: 'post',
							params: data,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.close()
								this.$parent.init()
								this.$notify({
									showClose: true,
									message: '保存成功!',
									type: 'success',
									title:"成功",
								})
							}
						})
					} else {
						this.isRepeat = true;
						return false
					}
				})
			}
		}
	}

</script>
<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.upKeepDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.upKeepDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}

	.upKeepDialog .form {
		height: 110px;
	}

	.upKeepDialog .form .el-form-item {
		margin-bottom: 15px;
		width: 49%;
		display: inline-block;
	}

	.upKeepDialog .el-dialog .elTab {
		clear: both;
		height: calc(100% - 110px)
	}

	.upKeepDialog .el-dialog .elTab .el-tabs {
		height: 100%
	}

	.upKeepDialog .el-dialog .elTab .el-tabs .el-tabs__content {
		height: calc(100% - 40px)
	}

	.upKeepDialog .el-dialog .elTab .el-tabs .el-tabs__content .el-tab-pane {
		height: 100%
	}
</style>